<template>
  <div class="searchArea">
    <input type="text" name="search" class="search" />
    <button class="searchBtn" @click="searchClick()"></button>
  </div>
</template>

<script>
import Bus from '@/common/bus';

export default {
  name: 'StudentSearch',
  methods: {
    searchClick() {
      const val = document.querySelector('.search');
      Bus.$emit('searchVal', val.value);
    },
  },
};
</script>

<style scoped>
.searchArea {
  width: 340px;
  display: flex;
}
.header .searchArea .search:hover,
.header .searchArea .search:focus,
.header .searchArea:hover .searchBtn,
.header .searchArea .search:focus .searchBtn,
.header .searchArea:hover .search {
  border-color: #3a8bff;
}
.header .searchArea .searchBtn:hover {
  color: #3a8bff;
  background: url(/src/assets/image/StudentProfile/search_hover.png) no-repeat center;
  background-size: 38%;
}
.header .searchArea .search {
  height: 30px;
  width: 290px;
  border-radius: 40px 0 0 40px;
  font-size: 16px;
  text-indent: 1rem;
  outline: none;
  border: 1px solid #d4d6d9;
  border-right: none;
}
.header .searchArea .searchBtn {
  height: 30px;
  width: 50px;
  outline: none;
  border-radius: 0 40px 40px 0;
  border: 1px solid #d4d6d9;
  border-left: none;
  background: url(/src/assets/image/StudentProfile/search.png) no-repeat center;
  background-size: 38%;
}
</style>